<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich">

<rich:tab id="customerTabInfoId" header="#{msg.label_tab_customer_info}">

	<h:panelGrid columns="2" cellspacing="0">
		<h:outputText value="#{msg.label_customer_appellation}"></h:outputText>
		<h:panelGroup>
			<h:selectOneRadio label="#{msg.label_customer_appellation}"
				id="titleInput" value="#{createCustomerBean.customer.title}">
				<f:selectItems value="#{createCustomerBean.saluteItems}"></f:selectItems>
			</h:selectOneRadio>
			<rich:message for="titleInput" ajaxRendered="true"></rich:message>

		</h:panelGroup>


		<h:outputText value="#{msg.label_customer_name_en}"></h:outputText>
		<h:panelGroup>
			<h:inputText label="#{msg.label_customer_name_en}" id="namEngInput"
				value="#{createCustomerBean.customer.namEng}" maxlength="60">
			</h:inputText>
			<rich:message for="namEngInput"></rich:message>
		</h:panelGroup>

		<h:outputText value="#{msg.label_customer_name_simp}"></h:outputText>
		<h:inputText value="#{createCustomerBean.customer.namZhs}"
			id="namZhsInput" maxlength="60"></h:inputText>

		<h:outputText value="#{msg.label_customer_name_chi}"></h:outputText>
		<h:inputText value="#{createCustomerBean.customer.namZht}"
			id="namZhtInput" maxlength="60"></h:inputText>

		<h:outputText value="#{msg.label_customer_birthday}"></h:outputText>
		<h:panelGroup>
			<h:selectOneMenu id="dobMonthInput"
				value="#{createCustomerBean.customer.dobMonth}"
				valueChangeListener="#{createCustomerBean.dobMonthValueChange}">
				<f:selectItems value="#{createCustomerBean.dobMonthItems}"></f:selectItems>
				<a4j:ajax event="valueChange" render="dobDayInput" execute="@this" />
			</h:selectOneMenu>
			<h:outputText value="#{label_month}"></h:outputText>
			<h:selectOneMenu id="dobDayInput"
				value="#{createCustomerBean.customer.dobDay}">
				<f:selectItems value="#{createCustomerBean.dobDayItems}"></f:selectItems>
			</h:selectOneMenu>
			<h:outputText value="#{label_day}"></h:outputText>
		</h:panelGroup>



		<h:outputText value="#{msg.label_customer_phone}"></h:outputText>
		<h:panelGroup>
			<rich:list type="definitions" var="telephoneVo"
				iterationStatusVar="sta"
				value="#{createCustomerBean.customer.customerTelephoneList}"
				id="telList" styleClass="rf-dlst-customer">
				<f:facet name="term">
					<h:panelGroup layout="block">
						<h:inputText id="ctryCdeInput" size="6"
							value="#{telephoneVo.ctryCde}"
							onkeyup="value=value.replace(/[^0-9]/,'');value=value.replace(/^0/g, '')"
							maxlength="14"></h:inputText>
						<h:outputLabel value=" - "></h:outputLabel>
						<h:inputText id="areaCdeInput" size="6"
							value="#{telephoneVo.areaCde}"
							onkeyup="value=value.replace(/[^0-9]/,'');value=value.replace(/^0/g, '')"
							maxlength="14"></h:inputText>
						<h:outputLabel value=" - "></h:outputLabel>
						<h:inputText size="20" value="#{telephoneVo.telNbr}"
							id="telNbrInput"
							onkeyup="value=value.replace(/[^0-9]/,'');value=value.replace(/^0/g, '')"
							onkeydown="checkkey2(this.value,event);value=value.replace(/^0/g, '')"
							validatorMessage="Validation Error: Invalid telephone number"
							maxlength="50">
							<f:validateRegex pattern="([0-9])*"></f:validateRegex>
							<rich:validator />
						</h:inputText>
						<h:outputLabel value="#{msg.label_category} "
							styleClass="space-left"></h:outputLabel>
						<h:selectOneMenu id="typeCdeInput" value="#{telephoneVo.typeCde}">
							<f:selectItem itemLabel="" itemValue=""></f:selectItem>
							<f:selectItem itemLabel="#{msg.label_contact_type_c}"
								itemValue="C"></f:selectItem>
							<f:selectItem itemLabel="#{msg.label_contact_type_h}"
								itemValue="H"></f:selectItem>
							<f:selectItem itemLabel="#{msg.label_contact_type_o}"
								itemValue="O"></f:selectItem>
							<f:selectItem itemLabel="#{msg.label_contact_type_other}"
								itemValue="M"></f:selectItem>
						</h:selectOneMenu>
						<a4j:commandButton render="telList" styleClass="space-left"
							value="#{msg.button_delete}"
							actionListener="#{createCustomerBean.deleteTelephone}">
							<f:param name="index" value="#{sta.index}"></f:param>
						</a4j:commandButton>
					</h:panelGroup>
					<rich:message for="telNbrInput" />
				</f:facet>
			</rich:list>
			<h:commandLink id="addTelephoneId"
				value="#{msg.label_customer_phone_add}">
				<a4j:actionListener listener="#{createCustomerBean.addTelephone}">
				</a4j:actionListener>
				<f:ajax render="telList" execute="@form"></f:ajax>
			</h:commandLink>
		</h:panelGroup>

		<h:outputText value=""></h:outputText>
		<div class="spacer"></div>

		<h:outputText value="#{msg.label_customer_email}"></h:outputText>
		<h:panelGroup id="emailList">
			<rich:list type="definitions" var="emailVo" iterationStatusVar="sta"
				value="#{createCustomerBean.customer.customerEmailList}"
				styleClass="rf-dlst-customer">
				<f:facet name="term">
					<h:panelGroup layout="block">
						<h:inputText id="emailInput" size="45" value="#{emailVo.email}"
							validatorMessage="Validation Error: Invalid email address"
							maxlength="120">

							<f:validateRegex
								pattern="^(([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5}){1,25})+([;.](([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5}){1,25})+)*$"></f:validateRegex>
							<rich:validator />
						</h:inputText>
						<h:outputLabel value="#{msg.label_category} "
							styleClass="space-left"></h:outputLabel>
						<h:selectOneMenu value="#{emailVo.typeCde}">
							<f:selectItem itemLabel="" itemValue=""></f:selectItem>
							<f:selectItem itemLabel="#{msg.label_contact_type_c}"
								itemValue="C"></f:selectItem>
							<f:selectItem itemLabel="#{msg.label_contact_type_o}"
								itemValue="H"></f:selectItem>
						</h:selectOneMenu>
						<a4j:commandButton styleClass="space-left" render="emailList"
							value="#{msg.button_delete}"
							actionListener="#{createCustomerBean.deleteEmail}">
							<f:param name="index" value="#{sta.index}"></f:param>
						</a4j:commandButton>
					</h:panelGroup>
					<rich:message for="emailInput" />
				</f:facet>
			</rich:list>
		</h:panelGroup>

		<h:outputText value=""></h:outputText>
		<h:commandLink value="#{msg.label_customer_email_add}">
			<a4j:actionListener listener="#{createCustomerBean.addEmail}">
			</a4j:actionListener>
			<f:ajax render="emailList" execute="@form"></f:ajax>
		</h:commandLink>


		<h:outputText value=""></h:outputText>
		<div class="spacer"></div>

		<h:outputText value="#{msg.label_customer_address}"></h:outputText>
		<h:panelGroup id="addrList">
			<rich:list type="definitions" var="addressVo"
				iterationStatusVar="sta"
				value="#{createCustomerBean.customer.customerAddressList}"
				styleClass="rf-dlst-customer">
				<f:facet name="term">
					<h:panelGrid columns="1">
						<h:panelGroup>
							<h:selectOneMenu id="countryId" value="#{addressVo.countryId}"
								valueChangeListener="#{addressVo.ctryValueChange}">
								<f:selectItem itemLabel="" itemValue=""></f:selectItem>
								<f:selectItems value="#{addressVo.ctryItems}"></f:selectItems>
								<a4j:ajax event="valueChange" render="provinceId cityPanel"
									execute="@this" />
							</h:selectOneMenu>
							<h:selectOneMenu id="provinceId" value="#{addressVo.provinceId}"
								valueChangeListener="#{addressVo.provinceValueChange}"
								styleClass="space-left">
								<f:selectItem itemLabel="" itemValue=""></f:selectItem>
								<f:selectItems value="#{addressVo.provinceItems}"></f:selectItems>
								<a4j:ajax event="valueChange" render="cityPanel" execute="@this" />
							</h:selectOneMenu>
							<h:outputLabel value="#{msg.label_province}"></h:outputLabel>

							<h:selectOneMenu id="cityPanel" styleClass="space-left"
								value="#{addressVo.placeId}">
								<f:selectItem itemLabel="" itemValue=""></f:selectItem>
								<f:selectItems value="#{addressVo.cityItems}"></f:selectItems>
							</h:selectOneMenu>
							<h:outputLabel value="#{msg.label_city}"></h:outputLabel>

							<h:outputLabel value="#{msg.label_category}"
								styleClass="space-left"></h:outputLabel>
							<h:selectOneMenu value="#{addressVo.typeCde}">
								<f:selectItem itemLabel="" itemValue=""></f:selectItem>
								<f:selectItem itemLabel="#{msg.label_contact_type_c}"
									itemValue="C"></f:selectItem>
								<f:selectItem itemLabel="#{msg.label_contact_type_h}"
									itemValue="H"></f:selectItem>
								<f:selectItem itemLabel="#{msg.label_contact_type_o}"
									itemValue="O"></f:selectItem>
							</h:selectOneMenu>
						</h:panelGroup>

						<h:panelGroup>
							<h:outputText value=""></h:outputText>
							<h:inputText size="45" value="#{addressVo.addr1}" maxlength="200"></h:inputText>
						</h:panelGroup>

						<h:panelGroup>
							<h:outputText value=""></h:outputText>
							<h:inputText size="45" value="#{addressVo.addr2}" maxlength="200"></h:inputText>
						</h:panelGroup>

						<h:panelGroup>
							<h:outputText value=""></h:outputText>
							<h:inputText size="45" value="#{addressVo.addr3}" maxlength="200"></h:inputText>
						</h:panelGroup>

						<h:panelGroup>
							<h:inputText size="20" value="#{addressVo.dstrt}" maxlength="50"></h:inputText>
							<h:outputLabel value="#{msg.label_customer_address_area}"></h:outputLabel>
							<h:inputText size="20" value="#{addressVo.zip}" id="zipInput"
								validatorMessage="Validation Error: Invalid zip" maxlength="50">
								<f:validateRegex pattern="^[1-9][0-9]{5}$"></f:validateRegex>
								<rich:validator />
							</h:inputText>
							<h:outputLabel value="#{msg.label_customer_address_zip_code}"></h:outputLabel>

							<a4j:commandButton styleClass="space-left" render="addrList"
								value="#{msg.button_delete}"
								actionListener="#{createCustomerBean.deleteAddress}">
								<f:param name="index" value="#{sta.index}"></f:param>
							</a4j:commandButton>
						</h:panelGroup>
						<rich:message for="zipInput"></rich:message>
						<h:panelGroup>
							<h:outputText size="20" maxlength="50"></h:outputText>
							<h:outputText size="20" maxlength="50"></h:outputText>
						</h:panelGroup>

					</h:panelGrid>

				</f:facet>
			</rich:list>
		</h:panelGroup>

		<h:outputText value=""></h:outputText>
		<h:commandLink value="#{msg.label_customer_address_add}">
			<a4j:actionListener listener="#{createCustomerBean.addAddress}">
			</a4j:actionListener>
			<f:ajax render="addrList" execute="@form"></f:ajax>
		</h:commandLink>

		<h:outputText value=""></h:outputText>
		<div class="spacer"></div>

		<h:outputText value="#{msg.label_customer_rmk_1}"></h:outputText>
		<h:inputText size="45" maxlength="100" id="customerRemark1Input"
			value="#{createCustomerBean.customer.remark1}"></h:inputText>


		<h:outputText value="#{msg.label_customer_rmk_2}"></h:outputText>
		<h:inputText size="45" maxlength="100" id="customerRemark2Input"
			value="#{createCustomerBean.customer.remark2}"></h:inputText>

		<h:outputText value="#{msg.label_customer_contact}"></h:outputText>
		<h:panelGroup>
			<h:selectBooleanCheckbox>
			</h:selectBooleanCheckbox>
			<h:outputLabel value="#{msg.label_customer_contact_mail}"></h:outputLabel>
			<h:selectBooleanCheckbox>
			</h:selectBooleanCheckbox>
			<h:outputLabel value="#{msg.label_customer_contact_email}"></h:outputLabel>
			<h:selectBooleanCheckbox>
			</h:selectBooleanCheckbox>
			<h:outputLabel value="#{msg.label_customer_contact_sms}"></h:outputLabel>
			<h:selectBooleanCheckbox>
			</h:selectBooleanCheckbox>
			<h:outputLabel value="#{msg.label_customer_contact_phone}"></h:outputLabel>
		</h:panelGroup>

		<h:outputText value="#{msg.label_customer_status}"></h:outputText>
		<h:panelGroup>
			<h:selectOneRadio disabled="true" id="statCdeInput"
				value="#{createCustomerBean.customer.statCde}">
				<f:selectItems value="#{createCustomerBean.customerStatusItems}"></f:selectItems>
			</h:selectOneRadio>
		</h:panelGroup>

	</h:panelGrid>
</rich:tab>





</html>